import React, { FC, memo, useEffect, useState } from "react"
import { LIST_PAGE_PARAM_KEY, LIST_PAGE_SIZE, LIST_PAGE_SIZE_PARAM_KEY } from "@/constant"
import { useLocation, useNavigate, useSearchParams } from "react-router-dom"
import { Pagination } from "antd"
import { useDebounceFn } from "ahooks"

type PropsType = {
    total: number
}

const ListPage: FC<PropsType> = (props: PropsType) => {
    // 获取父组件传递的数据
    const { total } = props

    // 当前页数
    const [current, setCurrent] = useState(1)
    // 当前页面有多少条数据（默认10条）
    const [pageSize, setPageSize] = useState(LIST_PAGE_SIZE)

    // 获取url中携带的参数
    const [searchParams] = useSearchParams()

    // 使用hook函数跳转页面
    const nav = useNavigate()
    // 获取当前路由
    const { pathname } = useLocation()

    useEffect(() => {
        // 从url获取page参数值
        const page = parseInt(searchParams.get(LIST_PAGE_PARAM_KEY) || "") || 1
        setCurrent(page)
        // 从url中获取pageSize参数值
        const pageSize = parseInt(searchParams.get(LIST_PAGE_SIZE_PARAM_KEY) || "") || LIST_PAGE_SIZE
        setPageSize(pageSize)
    }, [searchParams]) // 依赖于searchParams ，值更新就重新执行

    /**
     * @description 页面改变的回调函数：当page pageSize改变时，跳转页面（改变url参数）
     * @param page 位于哪个页面  比如第一页
     * @param pageSize 页面有多少条数据
     */
    function handlePageChange(page: number, pageSize: number) {
        // 修改路由中参数的配置项
        searchParams.set(LIST_PAGE_PARAM_KEY, page.toString())
        searchParams.set(LIST_PAGE_SIZE_PARAM_KEY, pageSize.toString())

        // 进行路由跳转，可以传入一个对象
        nav({
            pathname,
            search: searchParams.toString()
        })
    }

    const { run: handlePageChangeDebounced } = useDebounceFn(
        (page: number, pageSize: number) => {
            handlePageChange(page, pageSize)
        },
        { wait: 300 } // 防抖时间 300ms
    )

    return <Pagination align="center" current={current} pageSize={pageSize} total={total} onChange={handlePageChangeDebounced} />
}

export default memo(ListPage)
